<template>
	<!-- 弹出层 -->
	<free-popup ref="confirm" maskColor transformOrigin="center center" isCenter>
		<view class="bg-white rounded" style="width: 600rpx;" :style="'bottom:'+keyBoardHeight/2+ 'rpx;'">
			 
			<view class="flex flex-column px-3" v-if="title"> 
				<text class="font-weight font-md mt-5 mb-2">{{title}}</text>
				<slot></slot>
			</view>
			
			
			<view class="py-2 pl-5 page-color my-2 mx-3" v-if="name">
				<text class="font-sm text-muted flex-a">{{name}}</text>
			</view>
			<slot name="middle">
			</slot>
			
			<view style="height: 100rpx;width: 600rpx;" class="border-top flex-a-j">
				<view @click="close" class="flex-1 border-right flex-a-j py-2" style="height: 100rpx;box-sizing: border-box;" hover-class="bg-light"><text class="font-md">取消</text></view>
				<view @click="confirm" class="flex-1 py-2 flex-a-j" style="height: 100rpx;box-sizing: border-box;" hover-class="bg-light"><text class="font-md" >确定</text></view>
			</view>
		</view>
	</free-popup>
</template>

<script>
	import freePopup from "@/components/free-ui/free-popup.vue"
	export default {
		props:{
			title:{
				default:"标题",
				type:String
			},
			name:{
				default:"",
				type:String
			},
			
		},
		components:{
			freePopup
		},
		data(){
			return {
				keyBoardHeight:0,
				callback:false
			}
		},
		mounted() {
			uni.onKeyboardHeightChange(res => {
			  
			  this.keyBoardHeight = res.height
			})
		},
		methods:{
			//显示
			show(callback=false){
				this.callback = callback
				this.$refs.confirm.show()
			},
			//关闭
			close(){
				this.$refs.confirm.hide()
			},
			//确定
			confirm(){
				if(typeof this.callback==='function'){
					this.callback(()=>{
						this.close()
					})
				}
			}
		}
	}
</script>

<style>
</style>
